<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3动画基础语法</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background: orange;
		}
		@-webkit-keyframes animate{
			0%{opacity: 0;}
			100%{opacity: 1;}
		}
		@-moz-keyframes animate{
			0%{opacity: 0;}
			100%{opacity: 1;}
		}
		@-o-keyframes animate{
			0%{opacity: 0;}
			100%{opacity: 1;}
		}
		@keyframes animate{
			0%{opacity: 0;}
			100%{opacity: 1;}
		}
		#logo{
			-webkit-animation: animate 3s infinite;
			   -moz-animation: animate 3s infinite;
			     -o-animation: animate 3s infinite;
			        animation: animate 3s infinite;
		}


	</style>
</head>
<body>
	<div id="logo"></div>
</body>
</html>